import React from 'react';
import './payNow.scss';
import '../../assest/style/common.css';
import '../../assest/style/font/iconfont.css';
import png from '../../assest/img/homeing.png';
function PayNow() {
    return ( 
        <div className='payNow app'>
            <div className='subtop bg-fff pt-20 pl-20 pr-10 mb-10'>
                <div className='roomInfo flex'>
                        <img className='img mr-10' src="https://img.villaday.com/images/village/vg_213/213-15326755495680.jpg" alt="" />
                        <div className='introduce flex fdc'>
                            <span className='name mt-5 mb-20'>较场尾·海角9号沙滩度假别墅</span>
                            <span className='date mb-5'>住离日期:2021.08.30-2021.08.31</span>
                        </div>
                </div>
            </div>

            <div className='personInfo mb-10 bg-fff'>
                <div className='ml-20'>
                    <ul>
                        <li className='personName flex aic jc-sb'>
                            <span>预定姓名:</span>
                            {/* <input className='ml-20 mr-20 personinp' value={'zhangxiansheng'}/> */}
                            <span className='ml-20 mr-20 personinp'>zhangxiansheng</span>
                        </li>
                        <li className='phone flex aic jc-sb'>
                            <span>预定电话:</span>
                            <span className='ml-20 mr-20 phoneinp'>13800000000</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div className='payInfo bg-fff mb-10'>
                <div className='ml-20'>
                    <div className='money mr-20'>
                        <div className='total flex aic jc-sb'>
                            <span>总金额:</span>
                            <span>￥6888.00</span>
                        </div>
                        <div className='pay flex aic jc-sb'>
                            <span>实付金额</span>
                            <span>￥6888.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <div className='payway bg-fff pt-20'>
                <div className='way ml-20 mr-20  flex aic'>
                    <span>&nbsp;支付方式</span>    
                </div>
                <div className='zfb ml-20 mr-20 flex aic jc-sb'>
                    <span className='flex aic'>
                        <i className='homeing icon iconfont icon-v1 mr-10'></i>
                        <span>
                        支付宝支付
                        </span>
                    </span>    
                    <i className='arrow icon iconfont icon-iconfontyoujiantou-copy-copy-copy-copy'></i>    
                </div>
            </div>

            <div className='immediately flex bg-fff'>
                <div className='should flex aic ml-20'>
                    <span>应付总额:</span>
                    <span className='m ml-20'>￥6888.00</span>
                </div>
                <button className='submit'>
                    提交订单
                </button>
            </div>
        </div>
    );
}

export default PayNow;